import React, { useEffect, useState } from 'react'
import { Descriptions, PageHeader } from 'antd';
import { useParams } from 'react-router-dom';
import axios from 'axios';
import moment from 'moment';

export default function Newspreview() {
  const { id } = useParams();
  const [detail, setDetail] = useState();
  const auditList = ['未审核','审核中','已通过','未通过'];
  const publishList = ['未发布','待发布','已发布','已下线'];
  const colorList = ['black', 'orange', 'green', 'red'];
  useEffect(()=>{
    axios({
      url:`/news/${id}?_expand=category&_expand=role`
    }).then(res =>{
      console.log(res.data);
      setDetail(res.data);
    });
  },[id]);

  return (
    <div className="site-page-header-ghost-wrapper">
      {
        detail && 
        <div>
          <PageHeader
            ghost={false}
            onBack={() => window.history.back()}
            title={detail.title}
            subTitle={detail.category.title}
          >
            <Descriptions size="small" column={3}>
              <Descriptions.Item label="创建者">{detail.author}</Descriptions.Item>
              <Descriptions.Item label="创建时间">{moment(detail.createTime).format('YYYY-MM-DD HH:mm:ss')}</Descriptions.Item>
              <Descriptions.Item label="发布时间">{detail.publishTime?moment(detail.createTime).format('YYYY-MM-DD HH:mm:ss'):'-'}</Descriptions.Item>
              <Descriptions.Item label="区域">{detail.region}</Descriptions.Item>
              <Descriptions.Item label="审核状态"><span style={{color:colorList[detail.auditState]}}>{auditList[detail.auditState]}</span></Descriptions.Item>
              <Descriptions.Item label="发布状态"><span style={{color:colorList[detail.publishState]}}>{publishList[detail.publishState]}</span></Descriptions.Item>
              <Descriptions.Item label="访问数量">{detail.view}</Descriptions.Item>
              <Descriptions.Item label="点赞数量">{detail.star}</Descriptions.Item>
              <Descriptions.Item label="评论数量">0</Descriptions.Item>
            </Descriptions>
          </PageHeader>
          <div dangerouslySetInnerHTML={{__html:detail.content}} style={{margin:'0 1.5rem', padding:'1rem',border:'1px solid grey', borderRadius:'.3rem', overflow:'auto', width:'95%', height:'43.75rem'}}/>
        </div>
      }
    </div>
  )
}
